﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>海报推广</title>
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <script src="/script/config.js"></script>
    <script src="/script/pack/zui/lib/board/zui.board.min.js"></script>
    <link href="/script/pack/zui/lib/board/zui.board.min.css" rel="stylesheet" />
    <link href="/script/pack/zui/lib/colorpicker/zui.colorpicker.min.css" rel="stylesheet" />
    <script src="/script/pack/zui/lib/colorpicker/zui.colorpicker.min.js"></script>
</head>
<style>
    .board-item.drag-shadow { z-index: 9999 }
    #draggableBox2 { width: 510px; height: 700px; background-color: #fafafa; background-repeat: no-repeat; background-size: 100% 100%; position: relative; }
        #draggableBox2 .btn-draggable { position: absolute; transition: none; cursor: move; }
    #dragLog2 { margin: 0; border: none; background: none; }
    .view-page { margin-left: 10%; margin-bottom: 0; }
    #portrait { background-image: url(/img/logo.jpg); background-repeat: no-repeat; background-size: 100% 100%; text-align: center; width: 60px; height: 60px; box-sizing: border-box; overflow: hidden; }
    #coder { background-image: url(/img/erweum.jpg); background-repeat: no-repeat; background-size: 100% 100%; width: 60px; height: 60px; text-align: center; }
    #namer { text-align: center; font-size: 14px; background-color: #fff; }
    .controls { position: absolute; top: 81px; left: 50%; width: 300px; }
    .input-group { margin-bottom: 10px; }
</style>
<body>
    <div class="view-page">
        
        <h5>海报推广</h5>
        
        <div id="draggableBox2">
            <img class="promoimg" src=""/>
            <div id="portrait" class=" btn-draggable" style="top: 0px; left: 0px;"></div>
            <div id="coder" class=" btn-draggable" style="top: 0px; left: 0px;"> </div>
            <div id="namer" class="btn-draggable" style="top: 0px; left: 0px;">内容</div>
        </div>
        <div class="controls">

        </div>
    </div>
</body>
</html>
<script type="text/html" id="controls-tem">
    <button type="button" class="btn btn-info">上传背景图</button>
    <br />
    <h5>下面名字:</h5>
    <br />
    <input value="推广海报1号" readonly style="display: inline-block; width: 100%;" />
    <br />
    <h5>下面内容设置（位置可拖拉）</h5>
    <div class="input-group">
        <textarea rows="3" id="Content" style="width: 299px;" value="{{Content}}" data-form="Content">{{Content}}</textarea>
    </div>
    <div class="input-group">
        <span class="input-group-addon">内容颜色</span>
        <input type="text" class="form-control" id="myColor3" data-form="Color" name="myColor3" data-provide="colorpicker" data-wrapper="input-group-btn" data-pull-menu-right="true" value="{{Color}}" placeholder="请输入16进制颜色值，例如 #FF00DD">
    </div>
    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 宽 </button>
        </span>
        <input id="wide" type="text" class="form-control  namewidth " data-form="namewidth" value="{{namewidth}}" placeholder="宽 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 高 </button>
        </span>
        <input id="high" type="text" class="form-control nameheight" data-form="nameheight" value="{{nameheight}}" placeholder="高   如：20px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 字体大小 </button>
        </span>
        <input id="wide" type="text" class="form-control  nameSize" data-form="nameSize" value="{{nameSize}}" placeholder="字体大小 如：40px">
    </div>

    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">上</button>
        </span>
        <input id="wide" type="text" class="form-control nametop" data-form="nametop" value="{{nametop}}" placeholder="宽 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">左</button>
        </span>
        <input id="high" type="text" class="form-control nameleft" data-form="nameleft" value="{{nameleft}}" placeholder="高   如：20px">
    </div>

    <h5>下面头像设置 （位置可拖拉）</h5>
    <br />
    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 宽 </button>
        </span>
        <input id="wide" type="text" class="form-control LogoPicwidth" data-form="LogoPicwidth" value="{{LogoPicwidth}}" placeholder="宽 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 高 </button>
        </span>
        <input id="high" type="text" class="form-control LogoPicheigth" data-form="LogoPicheigth" value="{{LogoPicheigth}}" placeholder="高   如：20px">
    </div>
    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">上</button>
        </span>
        <input id="wide" type="text" class="form-control LogoPictop" data-form="LogoPictop" value="{{LogoPictop}}" placeholder="上 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">左</button>
        </span>
        <input id="high" type="text" class="form-control LogoPicleft" data-form="LogoPicleft" value="{{LogoPicleft}}" placeholder="右 如：20px">
    </div>
    <h5>下面二维码设置 （位置可拖拉）</h5>
    <br />
    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 宽 </button>
        </span>
        <input id="wide" type="text" class="form-control  QrCodewidth" data-form="QrCodewidth" value="{{QrCodewidth}}" placeholder="宽 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button"> 高 </button>
        </span>
        <input id="high" type="text" class="form-control  QrCodeheight" data-form="QrCodeheight" value="{{QrCodeheight}}" placeholder="高   如：20px">
    </div>
    <div class="input-group">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">上</button>
        </span>
        <input id="wide" type="text" class="form-control QrCodetop" data-form="QrCodetop" value="{{QrCodetop}}" placeholder="上 如：40px">
        <span class="input-group-btn">
            <button disabled class="btn btn-default" type="button">左</button>
        </span>
        <input id="high" type="text" class="form-control QrCodeleft" data-form="QrCodeleft" value="{{QrCodeleft}}" placeholder="右 如：20px">
    </div>
    <button type="button" class="btn btn-primary determine">确定提交</button>
</script>
<link href="/script/valid/css/tr.css" rel="stylesheet" /><!--判断如：PlatformName格式-->
<script src="/script/valid/form-valid.js?v=2018"></script>
<script src="/script/plugins/upload/js/config.js"></script>
<script type="text/javascript">
    $(function () {
        var data = [
            {
                tem: '#myColor3',
                element: "#namer",
                attribute: "color"
            },
            {
                tem: '.namewidth',
                element: "#namer",
                attribute: "width"
            },
            {
                tem: '.nameheight',
                element: "#namer",
                attribute: "height"
            },
            {
                tem: '.nameSize',
                element: "#namer",
                attribute: "font-size"
            },
            {
                tem: '.nametop',
                element: "#namer",
                attribute: "top"
            },
            {
                tem: '.nameleft',
                element: "#namer",
                attribute: "left"
            },
            {
                tem: '.LogoPicwidth',
                element: "#portrait",
                attribute: "width"
            },
            {
                tem: '.LogoPicheigth',
                element: "#portrait",
                attribute: "height"
            },
            {
                tem: '.LogoPictop',
                element: "#portrait",
                attribute: "top"
            },
            {
                tem: '.LogoPicleft',
                element: "#portrait",
                attribute: "left"
            },
            {
                tem: '.QrCodewidth',
                element: "#coder",
                attribute: "width"
            },
            {
                tem: '.QrCodeheight',
                element: "#coder",
                attribute: "height"
            },
            {
                tem: '.QrCodetop',
                element: "#coder",
                attribute: "top"
            },
            {
                tem: '.QrCodeleft',
                element: "#coder",
                attribute: "left"
            },
            {
                tem: '#Content',
                element: "#namer",

            }
        ]
        for (let i in data) {
            _content(data[i].tem, data[i].element, data[i].attribute)
        }
    })

    //模板
    var inintData = {
        Content: "内容",
        Color: "#3280fC",
        namewidth: "0px",
        nameheight: "0px",
        nameSize: "14px",
        nametop: "0px",
        nameleft: "0px",
        LogoPicwidth: "60px",
        LogoPicheigth: "60px",
        LogoPictop: "0px",
        LogoPicleft: "0px",
        QrCodewidth: "60px",
        QrCodeheight: "60px",
        QrCodetop: "0px",
        QrCodeleft: "0px"

    };
    $(".controls").templateRender({ el: "controls-tem", data: inintData });//渲染模板，要先渲染才能获值
    //拖动
    var count = 0;
    var $dragLog = $('#dragLog2');
    $('#draggableBox2').draggable({
        container: '#draggableBox2',
        selector: '.btn-draggable', // 可拖动元素选择器
        before: function (e) {
          
        },
        drag: function (e) {
         
           
        },
        finish: function (e) {            
            _show(e.element[0].id, JSON.stringify(e.pos.top), JSON.stringify(e.pos.left))
            if (e.pos.left >= 488 || e.pos.left <= 0 || e.pos.top <= 0 || e.pos.top >= 643) {
                alert("位置不可拖拉出框外！")
            }
        }
    });
    
    var ConfigParam = {};
    //上传背景图
    $(".btn-info").click(function () {
        $.WebUploader({
            uploader: { //图片上传配置
                fileNumLimit: 1, // 验证文件总数量, 超出则不允许加入队列
                fileSingleSizeLimit: 1000000, //验证单个文件大小是否超出限制,单位计算/b
                accept: { //现在被上传文件 不可分体的列表
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png,ico',
                    mimeTypes: 'image/*'
                },
                succee: function (rs) {
                    $('.promoimg').attr("src", rs.Url)
                    $.msgSucceed("上传成功！")
                    ConfigParam.BackgPath = rs.Url
                }
            }
        });
    })


    //属性/内容：颜色、宽高、上右
    function _content(tem, element, attribute) {
        if (attribute == "" | attribute == null) {
            $(tem).on('change', function () {
                $(element).text($(this).val())
            });
        } else {
            $(tem).on('change', function () {
                $(element).css(attribute, $(this).val())
            });
        }
    }
    //拖拉显示：上/右
    function _show(e, t, l) {
        var state = [
            {
                tes: "coder",
                tops: $('.QrCodetop'),
                lefts: $('.QrCodeleft')
            },
            {
                tes: "namer",
                tops: $('.nametop'),
                lefts: $('.nameleft')
            },
            {
                tes: "portrait",
                tops: $('.LogoPictop'),
                lefts: $('.LogoPicleft')
            }
        ]
        for (let i in state) {
            if (e == state[i].tes) {
                state[i].tops.val(t + "px");
                state[i].lefts.val(l + "px");
            }

        }
    }



    // 确定提交
    $(".determine").click(function () {
        var config = {
            LogoPic: {
                DrawCircle: true,
                X: parseInt($(".LogoPicleft").val()) ,
                Y: parseInt($(".LogoPictop").val()) ,
                Width: parseInt($(".LogoPicwidth").val())  ,
                Height: parseInt($(".LogoPicheigth").val()) 
            },
            QrCode: {
                DrawCircle: true,
                X: parseInt($(".QrCodeleft").val()) ,
                Y: parseInt($(".QrCodetop").val()) ,
                Width: parseInt($(".QrCodewidth").val()) ,
                Height: parseInt($(".QrCodeheight").val() )
            },
            NickName: {
                Content: parseInt($("#Content").val()) ,
                Color: parseInt($("#myColor3").val()),
                Name: "黑体",
                Size: parseInt($(".nameSize").val()) ,
                X: parseInt($(".nameleft").val()) ,
                Y: parseInt($(".nametop").val()) ,
                Width: parseInt($(".namewidth").val()) ,
                Height: parseInt($(".nameheight").val()) 
            }
        }
        var data = {
            PromotionPosterConfig: {
                Name: "海报推广1号",
                Status: 1,
                ConfigParam: JSON.stringify(config)
            }
        }
             
       
        $.http.json("posterconfig/insert",data,
        {
            pass: function (d) {

                $.msgSucceed(d.Errmsg)
             }
        });
        return;
    })

</script>